<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>博客首页</title>
</head>

<body>
<h1>博客首页</h1>
<div id="blog-container"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>
<script>
    /*发送get请求*/
    function get(url) {
        return $.get(url);
    }

    /*显示格式化时间*/
    function getFormatDate(dt) {
        return moment(dt).format('LL');
    }

    /*获取url参数*/
    function getUrlParams() {
        let paramStr = location.href.split('?')[1] || '';
        paramStr = paramStr.split('#')[0];
        const result = {};
        paramStr.split('&').forEach(itemStr => {
            const arr = itemStr.split('=');
            const key = arr[0];
            result[key] = arr[1];
        });
        return result;
    }

    /*获取dom元素*/
    const $container = $('#blog-container');

    /*拼接接口url*/
    let url = '/api/blog/list';
    const urlParams = getUrlParams();
    if (urlParams.author) {
        url += '?author=' + urlParams.author;
    }

    /*加载数据*/
    get(url).then(res => {
        if (res.errno !== 0) {
            alert('数据错误');
            return;
        }
        /*遍历博客列表，并显示*/
        const data = res.data || [];
        data.forEach(item => {
            $container.append($(`
                <div class="title-wrapper">
                    <p class="title">
                        <a href="/detail.html?id=${item.id}" target="_blank">${item.title}</a>
                    </p>
                    <div class="info-wrapper">
                        <span>
                            <a href="/index.html?author=${item.author}">${item.author}</a>
                        </span>
                        <span>${getFormatDate(item.createtime)}</span>
                    </div>
                </div>
            `))
        })
    })
</script>
</body>

</html>